<template>
  <view class="doctor">
    <view class="time">
      <view class="left">
        <p class="p2">全部</p>
      </view>
      <scroll-view scroll-x class="right">
        <view class="right1">
          <view
            class="item"
            @click="tabChange(item.dep_id, item.week)"
            :class="{ bg: item.week == tabVlaue }"
            v-for="(item, index) in doctorTime"
            :key="index"
          >
            <view class="box">
              <p class="p3">{{ item.date }}</p>
              <p class="p4">{{ item.week }}</p>
              <p class="p5">{{ item.nu_source == 0 ? "无约" : "有约" }}</p>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="list">
      <view class="kongshuju" v-if="doctorList">
        <image src="../../static/other/kongshuju.jpg"></image>
        <p class="p1">暂无排班信息</p>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { api } from "../../api/api";
import type { doctorTimeT, doctorListT } from "../../types/type";
const doctorTime = ref<doctorTimeT[]>([]);
const doctorList = ref<doctorListT[]>([]);
onLoad(async (options) => {
  const res: any = await api.timesele({ dep_id: options.dep_id });
  doctorTime.value = res.data;
  const res1: any = await api.alldlist({ dep_id: options.dep_id });
  doctorList.value = res1.data;
});
const tabVlaue = ref<string>("");
const tabChange = async (dep_id: string, week: string) => {
  tabVlaue.value = week;
  const res: any = await api.everydlist({ dep_id: dep_id, week: week });
  doctorList.value = res.data;
};
</script>

<style lang="scss" scoped>
.doctor {
  width: 100vw;
  height: 100vh;
  background-color: #f6f6f6;
  .time {
    width: 100%;
    height: 150rpx;
    background-color: #fff;
    display: flex;
    padding: 10rpx 0;
    box-sizing: border-box;
    .left {
      width: 150rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .right {
      width: calc(100% - 150rpx);
    }
    .right1 {
      width: 160%;
      overflow-x: scroll;

      height: 100%;
      display: flex;
      align-items: center;
      text-align: center;
      .bg {
        background-color: #4e64eb !important;
        color: #fff;
      }
      .item {
        width: 150rpx;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20rpx;
      }
    }
    .p1 {
      font-size: 30rpx;
      font-weight: 600;
    }
  }
  .list {
    width: 100%;
    height: calc(100vh - 150rpx);

    .kongshuju {
      text-align: center;
      color: #ccc;
    }
  }
}
</style>
